<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Bootstrap and Fonts -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Main Inspinia CSS files -->
    <link id="loadBefore" href="css/froala_editor.min.css" rel="stylesheet">
</head>
<body>
    <div class="col-lg-12" style="margin-top: 50px;">
        <div>
            内容:
        </div>
        <textarea id="txtEditor" placeholder="请输入文章内容"></textarea> 
    </div>
</body>
<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- 编辑器插件 -->
<script src="js/froala_editor.min.js"></script>
<script src="js/plugins/colors.min.js"></script>

<script>
    $(function(){
        console.log($('#txtEditor'));
        $('#txtEditor').editable({
            inlineMode: false, alwaysBlank: true,
            language: "zh_cn",
            imageUploadURL: '',//上传到本地服务器的url
            imageUploadParams: {id: "edit"},
            imageDeleteURL: '',//删除图片的接口
            imagesLoadURL: ''//管理图片接口
        }).on('editable.afterRemoveImage', function (e, editor, $img) {
            console.log("$img",$img);
            // Set the image source to the image delete params.        
            editor.options.imageDeleteParams = {src: $img.attr('src')};
            // Make the delete request
            editor.deleteImage($img);
        });
    })
</script>
</html>